<script setup lang="ts">
import { useRouter } from 'vue-router'
import {formatDate} from '@/utils'

const router = useRouter()
const AssetTypeEnum: any = {
  0: '低危',
  1: '低危',
  2: '中危',
  3: '高危',
  4: '严重'
}

const props = defineProps({
  info: {
    type: Object,
    required: true,
    default: () => {}
  }
})

// 跳转到详情页
const linkInfo = (id: string,risklevel:any) => {
  console.log(risklevel);
  
  router.push({
    name: 'SearchLoopHoleInfo',
    params: {
      id: id,
      risklevel:risklevel
    }
  })
}
</script>
<template>
  <div class="search-item flex" @click="linkInfo(props.info.id,props.info.level)">
    <div class="left">
      <div class="left-t">
        <p>风险评估</p>
        <p :class="props.info.level>2?'highRisk':props.info.level===2?'mediumRisk':'lowRisk'"> {{ AssetTypeEnum[props.info.level] }}</p>
      </div>
      <div class="left-b">
        <span>{{ formatDate(props.info.upTime) }}&nbsp;更新</span>
      </div>
    </div>
    <div class="main">
      <div class="title">
        {{ `${props.info.name}(${props.info.cve})` }}
      </div>
      <div class="flex">
        <div class="tags-1">修复方案</div>
        <div class="tags-2">{{ props.info.refWebsite?"有":"无" }}</div>
      </div>
      <div class="content">{{ props.info.desc }}</div>
      <div class="sup">影响厂商：<span>{{ props.info.vendor }}</span></div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.search-item {
  margin: .3rem 0;
  cursor: pointer;
  .left{
    width:8.5rem;
    padding: .5rem;
    .left-t{
      padding: 1.3rem 0;
      border: 1px solid #e4e7ed;
      border-radius: .5rem;
      text-align: center;
      color: #666;
      .highRisk{
        color: #dd2b1d;
        font-weight: 900;
        font-size: 1.25rem;
        letter-spacing:.5rem;
      }
      .mediumRisk{
        color: #fbc531;
        font-weight: 900;
        font-size: 1.25rem;
        letter-spacing:.5rem;

      }
      .lowRisk{
        color: #409eff;
        font-weight: 900;
        font-size: 1.25rem;
        letter-spacing:.5rem;
        
      }

    }
    .left-b{
      margin-top: .4rem;
      color: #666;
    }
  }
  .main{
    flex:1;
    margin-left: 1rem;
    .title{
      font-weight: 700;
      margin-bottom: .3rem;
    }
    .tags-1{
      width: 4.5rem;
      text-align: center;
      color: #fff;
      // border: 1px solid #dd2b1d;
      border-radius: .3rem;
      background-color: #409eff;
    }
    .tags-2{
      margin-left: .5rem;
      width: 3.5rem;
      text-align: center;
      color: #409eff;
      border: 1px solid #409eff;
      border-radius: .3rem;
    }
    .content{
      color: #787878;
      margin:.5rem 0;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
    }
    .sup{
      color: #787878;
      span{
        font-weight: 500;
        color: #000;
      }
    }
  }
  .right{
    flex:1;
    background-color: aqua;
  }
}
</style>
